<template>
  <div class="mainBox1">
    <div class="tablebox">
      <div @click="changeCat" :class="{ tableBoxIcon: CatValue, tableBoxIcon2: !CatValue }"></div>
      <el-menu class="el-menu-vertical-demo" :collapse="isCollapse"
        :default-active="onRoutes" router>
        <el-menu-item index="PatientTags" class="menuItem">
          <i class="el-icon-s-opportunity"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="DictionaryManager" class="menuItem">
          <i class="el-icon-s-claim"></i>
          <span slot="title">词库管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <TheHeader></TheHeader>


    <el-main>
      <router-view />
    </el-main>

  </div>
</template>

<script>
  import TheHeader from './TheHeader.vue';
  export default {
    components: {
      TheHeader,
    },
    name: "MainTable",
    data() {
      return {
        switchValue: true, //背景样式变换开关
        isCollapse: true, //下拉小菜单
        CatValue: true, //猫咪图案
        username: "", //用户名
      };
    },

    created() {
      const _this = this;
      _this.$router.push("/PatientTags");
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    methods: {
      //改变菜单栏图标样式
      changeCat() {
        const _this = this;
        _this.CatValue = !_this.CatValue;
      },
    },
  };
</script>

<style lang="css" scoped>
  @import '../assets/css/maintable.css';
</style>
